<template>
  <div id="map_container" style="width: 100%; height: 100%">
    <div id="map" class="map" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script setup>
import Popover from "@/lang/popover";

import Map from 'ol/Map';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Overlay from 'ol/Overlay';
import Point from 'ol/geom/Point';
import MultiPoint from 'ol/geom/MultiPoint';
import Polygon from 'ol/geom/Polygon';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import LayerVector from 'ol/layer/Vector';
import SourceVector from 'ol/source/Vector';
import ImageLayer from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';

import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Text from 'ol/style/Text';
import Icon from 'ol/style/Icon';
import Fill from 'ol/style/Fill';

import {Modify} from "ol/interaction";
import {computed, onMounted, onUnmounted, ref} from "vue";
import {defaults, Control} from 'ol/control'

// create dom
const dom = document.createElement('div');
dom.className = 'sea-popover';
dom.innerHTML = '<p>this is a container</p><p>this is a container</p><p>this is a container</p><p>this is a container</p>';
document.body.appendChild(dom);

// create popover
const popover = new Popover();
popover.offset = 10; // 弹窗边缘留白
popover.dom = dom; // 弹窗组件
popover.hidden(); // 先隐藏组件


const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
        console.log('Element size changed!');
        console.log('Width:', entry.contentRect.width, 'Height:', entry.contentRect.height);
    }
});
resizeObserver.observe(document.body);

onMounted(() => {
    // 弹窗限制容器
    popover.box = document.getElementById('map_container');

    let map = new Map({
        view: new View({
            center: [12950000, 4860000],
            zoom: 4
        }),
        layers: [
            // 底图
            new TileLayer({
                source: new XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'})
            })
        ],
        target: 'map'
    });

    // 鼠标点击事件
    map.on('click', function (evt) {
        console.log(evt.pixel);
    });


    const content = document.createElement('div');
    content.className = 'map-icon';
    content.innerHTML = `
       <div  class="pink">title1</div>
       <div  class="blue">tips1</div>
    `;

        // 通过innerHTML添加HTML内容作为Overlay
        const element1 = document.createElement('div');
        element1.appendChild(content);

        // 工程点位点击事件
        element1.addEventListener('click', function (evt) {

            content.remove();
            element2.appendChild(content);

            // 弹窗定位组件
            popover.ref = evt.currentTarget;

            // 弹窗相对位置
            popover.openIn('bottom', 'mid');
        });

        const htmlOverlay1 = new Overlay({
            position: [12950000, 4860000],
            element: element1,
            positioning: 'top-left',
        });
        map.addOverlay(htmlOverlay1);

        // element.parentNode.style.zIndex = 1;


        // 通过innerHTML添加HTML内容作为Overlay
        const element2  = document.createElement('div');
        element2.appendChild(content);

        // 工程点位点击事件
        element2.addEventListener('click', function (evt) {

            content.remove();
            element1.appendChild(content);

            // 弹窗定位组件
            popover.ref = evt.currentTarget;

            // 弹窗相对位置
            popover.openIn('bottom', 'mid');
        });

        const htmlOverlay2 = new Overlay({
            position: [12950000, 4880000],
            element: element2,
            positioning: 'top-left',
        });

        map.addOverlay(htmlOverlay2);

        element2.parentNode.style.zIndex = 2;


    // .ol-overlaycontainer-stopevent
    // 遍历所有子节点

    // 监听地图拖动事件
    map.on('moveend', function (evt) {
        console.log('地图拖动结束，当前中心点：', evt.map.getView().getCenter());
        console.log('地图当前缩放级别：', evt.map.getView().getZoom());

        // 地图拖动的时候，隐藏组件
        popover.hidden();
    });

    // 监听地图缩放事件
    map.getView().on('change:resolution', function (evt) {
        const view = evt.target;
        const zoom = view.getZoom();
        console.log('地图缩放级别变化，当前缩放级别：', zoom);

        // 低于缩放的时候，隐藏组件
        popover.hidden();
    });
})


/**
 * 关闭选项卡右击菜单
 *
 * 下拉列表展开之后，不论点击哪里，都应该关闭弹窗。
 * 如果点击的是弹窗里面的东西，就不应该关闭。
 */
const onWindowsMousedown = (evt) => {
    popover.onWindowsMousedown(evt);
}

onMounted(() => {
    document.addEventListener('mousedown', onWindowsMousedown);
})


onUnmounted(() => {
    document.removeEventListener('mousedown', onWindowsMousedown);
    resizeObserver.disconnect();
})

</script>

<style>
.map {
    width: 100%;
    height: 400px;
}

.map-icon {
    position: relative;

    .blue {
        height: 32px;
        width: 64px;
        z-index: 1;
        left: 0;
        top: 0;
        position: absolute;
        background-color: lightblue;
    }

    .pink {
        height: 32px;
        width: 64px;
        z-index: 2;
        left: 0;
        top: 32px;
        position: absolute;
        background-color: lightpink;
    }
}

</style>